<template>
    <div class="cart-total">
        <h2>总计</h2>
        <!-- 如果总金额大于 0，则显示总金额 -->
        <p v-if="total > 0">总金额: {{ total }} 元</p>
        <!-- 如果购物车为空，则提示用户 -->
        <p v-else>购物车为空，无法计算总金额</p>
    </div>
</template>

<script setup>
// 引入 Vue 的 computed 函数用于计算属性
import { computed } from 'vue';
// 定义接收的 props，包含购物车商品数组
const props = defineProps(['items']);

// 计算总金额的响应式属性
const total = computed(() => {
    // 初始化总金额为 0
    let totalAmount = 0;
    // 遍历每个商品
    props.items.forEach(item => {
        // 计算当前商品的总价
        const itemTotal = item.price * item.quantity;
        // 将当前商品的总价累加到总金额中
        totalAmount += itemTotal;
    });
    // 返回最终的总金额
    return totalAmount;
});
</script>

<style scoped>
/* 总金额显示样式 */
.cart-total {
    font-weight: bold; /* 加粗字体 */
}
</style>